<!-- 详情 -->
<template>
    <div class="com-container">
        <xszk-header 
            :isLoginShow="isLoginShow"
            @onLogin="isLoginShow=true"
            @onClose="isLoginShow=false"
        ></xszk-header>
        <div class="com-main">
            <div v-if="getDescCont!=null&&oriClassList.length!=0">
                <el-breadcrumb separator="/" class="mt30" v-if="secondLvName">
                    <el-breadcrumb-item :to="{ path: '/index' }" class="com-crumb">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/list',query: {id:getCategorysId} }" class="com-crumb">{{secondLvName}}</el-breadcrumb-item>
                    <el-breadcrumb-item class="com-crumb">{{secondLvName+'详情'}}</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="details-cont">
                    <div v-if="getCategorysId!='8e15096a37db4cc299ebe46d58098931'&&getCategorysId!='8e15096a67a44807a4e45993a6df542b'" class="oh">
                        <div class="cont-fl">
                            <div class="fl-label">
                                <div class="flex jus-b">
                                    <div class="desc-top">
                                        <span class="desc-tag" v-if="getDescCont['案例编号']">{{getDescCont['案例编号']}}</span>
                                        <span class="desc-tit" :class="getDescCont['案例编号']?'pl7':''">{{getDescCont.name}}</span>
                                    </div>
                                    <div class="flex ali-c">
                                        <div class="desc-blue" v-if="getCategorysId=='8e15096a5dfb458cbe216383cc67ba3d'" @click="downFile">
                                            <img src="@/static/images/blue_down.png" class="img100" v-if="getDescCont['资源地址']">
                                            <img src="@/static/images/gary_down.png" class="img100" v-else>
                                        </div>
                                        <el-popover
                                            placement="left"
                                            trigger="hover"
                                            :visible-arrow="false"	
                                            popper-class="tool1-popper"
                                        >
                                            <div class="tool-code-img">
                                                <vue-qr
                                                    :logoSrc="qrImg"
                                                    :text="`http://fls.xszkh5.ilawpress.com/_md/lib/h5/index?/#/column-detail?id=${getProductId}&name=${secondLvName}`"
                                                    :size="95"
                                                    :margin="0"
                                                    colorDark="black"
                                                    colorLight="white"
                                                ></vue-qr>
                                                <div class="mt5">手机阅读更方便</div>
                                            </div>
                                            <div class="desc-code" slot="reference" v-if="getCategorysId!='8e15096a5dfb458cbe216383cc67ba3d'">
                                                <img src="@/static/images/code.png" class="img100">
                                            </div>
                                            <div class="desc-blue" slot="reference" v-else>
                                                <img src="@/static/images/blue_code.png" class="img100">
                                            </div>
                                        </el-popover>
                                    </div>
                                </div>
                                <div class="flex ali-c flex-wrap mt15">
                                    <button 
                                        class="tag-btn"
                                        v-for="(item,index) in keyWordList"
                                        :key="index"
                                        @click="toSearchPage(item)"
                                    >{{item}}</button>
                                </div>
                                <div class="tr mt25 fs14" style="color:#F56060">限时</div>
                                <div class="fr">
                                    <button class="com-plain-btn custom-plain fl" @click="onAddCollect">加入收藏</button>
                                    <button class="com-full-btn custom-full ml25 fl" @click="onBuy">{{getDescCont.price}}元购买</button>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <!-- 资源说明 -->
                            <div class="fl-label" v-if="getDescCont['资源说明']">
                                <h3 class="fs16">资源说明</h3>
                                <div class="mt15 flex">
                                    <div class="spot-type"></div>
                                    <div class="ml15">{{getDescCont['资源说明']}}</div>
                                </div>
                            </div>
                            <!-- 适用场景 -->
                            <div class="fl-label" v-if="getSceneList.length!=0">
                                <h3 class="fs16">适用场景</h3>
                                <div class="mt15 ml10">
                                    <div 
                                        class="mb10 flex"
                                        v-for="(items,index1) in getSceneList"
                                        :key="index1"
                                    >
                                        <div class="spot-type"></div>
                                        <ul class="type-list">
                                            <li
                                                v-for="(item,index2) in items.split('＞')"
                                                :key="index2"
                                            >
                                                <button @click="toSearchPage(item)">{{item}}</button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!-- 流程类别 -->
                            <div class="fl-label" v-if="getProcessList.length!=0">
                                <h3 class="fs16">流程类别</h3>
                                <div class="mt15 ml10">
                                    <div 
                                        class="mb10 flex"
                                        v-for="(items,index1) in getProcessList"
                                        :key="index1"
                                    >
                                        <div class="spot-type"></div>
                                        <ul class="type-list">
                                            <li
                                                v-for="(item,index2) in items.split('＞')"
                                                :key="index2"
                                            >
                                                <button @click="toSearchPage(item)">{{item}}</button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!-- 专业类别 -->
                            <div class="fl-label" v-if="getTypeList.length!=0">
                                <h3 class="fs16">专业类别</h3>
                                <div class="mt15 ml10">
                                    <div 
                                        class="mb10 flex"
                                        v-for="(items,index1) in getTypeList"
                                        :key="index1"
                                    >
                                        <div class="spot-type"></div>
                                        <ul class="type-list">
                                            <li
                                                v-for="(item,index2) in items.split('＞')"
                                                :key="index2"
                                            >
                                                <button @click="toSearchPage(item)">{{item}}</button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!-- 内容摘要 -->
                            <div class="fl-label" v-if="getDescCont['内容摘要']">
                                <h3 class="fs16">内容摘要</h3>
                                <p class="desc-txt" :class="{'threeline':!isOpen}">
                                    {{getDescCont['内容摘要']}}
                                    <span class="open-up" :class="{'flex ali-c jus-b':!isOpen}" @click="isOpen=!isOpen" v-if="getDescCont['内容摘要'].length>180">
                                        <span class="fs16 ml5" v-show="!isOpen">...</span>
                                        <span class="open-up-txt">{{isOpen?'收起':'展开'}}</span>
                                    </span>
                                </p>
                            </div>
                            <!-- 阅读详情 -->
                            <div class="fl-desc-label" v-if="getDescCont.preview">
                                <div v-html="getDescCont.preview" class="com-html"></div>
                                <div class="limit-read">
                                    <div class="mt50">
                                        <i class="el-icon-lock fs22 ctheme"></i>
                                        <span class="pl10 fs20 ctheme">购买可继续阅读</span>
                                    </div>
                                    <button class="com-full-btn custom-buy-full" style="margin:30px auto 0 auto;" @click="onBuy">立即购买 0.00有米</button>
                                </div>
                            </div>
                        </div>
                        <div class="cont-fr">
                            <div class="fr-label">
                                <h3 class="fr-title">{{secondLvName}}信息</h3>
                                <div class="fr-cont">
                                    <div v-if="getCategorysId=='8e150969e8ec4b65bb01ec3fc491e79a'">
                                        <div class="mb10">发布单位：<span>{{getDescCont['发布单位']|text}}</span></div>
                                        <div class="mb10">发布时间：<span>{{getDescCont['发布时间']|text}}</span></div>
                                        <div class="mb10">案例出处：<span class="ctheme cp" @click="toSearchPage(getDescCont['案例出处'])">{{getDescCont['案例出处']|text}}</span></div>  
                                    </div>
                                    <div v-else-if="getCategorysId=='8e15096a00734bd089c64a582135aef4'">
                                        <div class="mb10">发布机构：<span>{{getDescCont['发布机关']|text}}</span></div>
                                        <div class="mb10">发布字号：<span>{{getDescCont['发文字号']|text}}</span></div>
                                        <div class="mb10">公布日期：<span>{{getDescCont['发布日期']|text}}</span></div>
                                        <div class="mb10">实施日期：<span>{{getDescCont['实施日期']|text}}</span></div>
                                        <div class="mb10">修改日期：<span>{{getDescCont['修改日期']|text}}</span></div>
                                        <div class="mb10">失效日期：<span>{{getDescCont['失效日期']|text}}</span></div>
                                        <div class="mb10">修改及失效依据：<span class="ctheme cp" @click="toSearchPage(getDescCont['修改/失效依据'])">{{getDescCont['修改/失效依据']|text}}</span></div>
                                        <div class="mb10">效力级别：<span>{{getDescCont['效力级别']|text}}</span></div>  
                                        <div class="mb10">效力状态：<span>{{getDescCont['效力状态']=='Y'?'现行有效':getDescCont['效力状态']='N'?'现行无效':getDescCont['效力状态']}}</span></div>  
                                    </div>
                                    <div v-else-if="getCategorysId=='8e15096a2b5f48558cc6efed605674f8'">
                                        <div class="mb10">作者：<span class="ctheme cp" @click="toSearchPage(getDescCont['作者'])">{{getDescCont['作者']|text}}</span></div>
                                        <div class="mb10">文献出处：<span class="ctheme cp" @click="toSearchPage(getDescCont['文献出处'])">{{getDescCont['文献出处']|text}}</span></div>
                                        <div class="mb10">析自文献作者：<span>{{getDescCont['析自文献作者']|text}}</span></div>  
                                        <div class="mb10">发布时间：<span>{{getDescCont['发表时间']|text}}</span></div>
                                    </div>
                                    <div v-else-if="getCategorysId=='8e150969fa0a47ed8d3ef0674d907abf'">
                                        <div class="mb10">判决时间：<span>{{getDescCont['判决时间']|text}}</span></div>
                                        <div class="mb10">案号：<span>{{getDescCont['案号']|text}}</span></div>
                                        <div class="mb10">审理法院：<span class="ctheme cp" @click="toSearchPage(getDescCont['审理法院'])">{{getDescCont['审理法院']|text}}</span></div>
                                        <div class="mb10">案由：<span class="ctheme cp" @click="toSearchPage(getDescCont['案由'])">{{getDescCont['案由']|text}}</span></div>
                                        <div class="mb10">审理程序：<span class="ctheme cp" @click="toSearchPage(getDescCont['审理程序'])">{{getDescCont['审理程序']|text}}</span></div>  
                                        <div class="mb10">裁判出处：<span class="ctheme cp" @click="toSearchPage(getDescCont['裁判出处'])">{{getDescCont['裁判出处']|text}}</span></div>  
                                    </div>
                                    <div v-else-if="getCategorysId=='8e15096a5dfb458cbe216383cc67ba3d'">
                                        <div class="mb10">作者：<span>{{getDescCont['作者']|text}}</span></div>
                                        <div class="mb10">发表时间：<span>{{getDescCont['发表时间']|text}}</span></div>
                                        <div class="mb10">资源出处：<span class="ctheme cp" @click="toSearchPage(getDescCont['资源出处'])">{{getDescCont['资源出处']|text}}</span></div>  
                                    </div>
                                </div>
                            </div>
                            <div class="fr-label" v-if="getCategorysId=='8e15096a00734bd089c64a582135aef4'&&getDescCont['附件']">
                                <h3 class="fr-title">法规附件</h3>
                                <div class="fr-cont">
                                    <div class="flex mb10">
                                        <img src="@/static/images/fj_no_icon.png" class="fs0 mt2" width="18" height="16">
                                        <span class="ml10 cp twoline" style="line-height:18px">法规附件</span>
                                    </div>
                                </div>
                            </div>
                            <div class="fr-label" v-if="glfgList.length!=0">
                                <h3 class="fr-title">关联法规</h3>
                                <div class="fr-cont">
                                    <div 
                                        class="fr-item"
                                        v-for="(item,index) in glfgList"
                                        :key="index"
                                        @click="toGlDetails(item,0)"
                                    >
                                        <div class="item-spot"></div>
                                        <div>
                                            <div class="title fs14 twoline">{{item}}</div>
                                            <div class="fs12 c666">{{labelStr().time|text}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="fr-label" v-if="glzyList.length!=0">
                                <h3 class="fr-title">关联资源</h3>
                                <div class="fr-cont">
                                    <div 
                                        class="fr-item"
                                        v-for="(item,index) in glzyList"
                                        :key="index"
                                        @click="toGlDetails(item,1)"
                                    >
                                        <div class="item-spot"></div>
                                        <div>
                                            <div class="title fs14 twoline">{{item}}</div>
                                            <div class="fs12 c666">{{labelStr().time|text}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 图书详情||课程影音 -->
                    <div v-else>
                        <div class="book-label">
                            <div class="flex jus-b" style="margin:6px 0;">
                                <div class="book-img">
                                    <img :src="getDescCont['封面']?getDescCont['封面']:initImg" class="img100">
                                </div>
                                <div class="book-cont">
                                    <h3 style="color:#112C71" class="fs20">{{getDescCont.name}}</h3>
                                    <div class="flex ali-c flex-wrap mt5">
                                        <button 
                                            class="tag-btn"
                                            v-for="(item,index) in keyWordList"
                                            :key="index"
                                            @click="toSearchPage(item)"
                                        >{{item}}</button>
                                    </div> 
                                    <div class="mt15">分辑名：<span class="pl7">{{getDescCont['分辑名']|text}}</span></div>
                                    <div class="mt10">卷册号：<span class="pl7">{{getDescCont['卷册号']|text}}</span></div>
                                    <div class="mt10">{{getDescCont['作者']|text}} 主办</div>
                                    <div class="mt2 flex ali-c jus-b">
                                        <div class="flex ali-c">
                                            <span>出版日期：{{getDescCont['出版日期']|text}} 版次：{{getDescCont['版次']|text}}</span>
                                            <span class="ml40">书号: {{getDescCont['书号/刊号']|text}}</span>
                                        </div>
                                        <div>
                                            <el-popover
                                                placement="left"
                                                trigger="hover"
                                                :visible-arrow="false"	
                                                popper-class="tool1-popper"
                                            >
                                                <div class="tool-code-img">
                                                    <vue-qr
                                                        :logoSrc="qrImg"
                                                        :text="`http://fls.xszkh5.ilawpress.com/_md/lib/h5/index?/#/column-detail?id=${getProductId}&name=${secondLvName}`"
                                                        :size="95"
                                                        :margin="0"
                                                        colorDark="black"
                                                        colorLight="white"
                                                    ></vue-qr>
                                                    <div class="mt5">手机阅读更方便</div>
                                                </div>
                                                <div class="desc-code" slot="reference">
                                                    <img src="@/static/images/code.png" class="img100">
                                                </div>
                                            </el-popover>
                                        </div>
                                    </div>
                                    <div class="tr mt15 fs14" style="color:#F56060">限时</div>
                                    <div class="flex ali-c jus-b">
                                        <div class="fs16 ctheme cp">
                                            <img src="@/static/images/mulu_icon.png" width="16" height="12">
                                            <span class="pl7">查看目录</span>
                                        </div>
                                        <div class="flex ali-c">
                                            <button class="com-plain-btn custom-plain" @click="onAddCollect">加入收藏</button>
                                            <button class="com-full-btn custom-full ml25" @click="onBuy">0元购买</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 内容摘要 -->
                        <div class="book-label" v-if="getDescCont['内容摘要']">
                            <h3 class="fs16">内容摘要</h3>
                            <p class="desc-txt" :class="{'threeline':!isOpen}">
                                {{getDescCont['内容摘要']}}
                                <span class="open-up" :class="{'flex ali-c jus-b':!isOpen}" @click="isOpen=!isOpen" v-if="getDescCont['内容摘要'].length>180">
                                    <span class="fs16 ml5" v-show="!isOpen">...</span>
                                    <span class="open-up-txt">{{isOpen?'收起':'展开'}}</span>
                                </span>
                            </p>
                        </div>
                        <!-- 作者简介 -->
                        <div class="book-label" v-if="getDescCont['作者简介']">
                            <h3 class="fs16">作者简介</h3>
                            <div class="mt15 flex">
                                <div class="spot-type"></div>
                                <div class="ml15">{{getDescCont['作者简介']}}</div>
                            </div>
                        </div>
                        <!-- 专业类别 -->
                        <div class="book-label" v-if="getTypeList.length!=0">
                            <h3 class="fs16">专业类别</h3>
                            <div class="mt15 ml10">
                                <div 
                                    class="mb10 flex"
                                    v-for="(items,index1) in getTypeList"
                                    :key="index1"
                                >
                                    <div class="spot-type"></div>
                                    <ul class="type-list">
                                        <li
                                            v-for="(item,index2) in items.split('＞')"
                                            :key="index2"
                                        >
                                            <button @click="toSearchPage(item)">{{item}}</button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- 目录 -->
                        <!-- 相关图书 -->
                        <div class="book-label" v-if="xgtsList.length!=0">
                            <h3 class="fs16">相关{{getCategorysId=='8e15096a37db4cc299ebe46d58098931'?'图书':getCategorysId=='8e15096a67a44807a4e45993a6df542b'?'影音':''}}</h3>
                            <ul class="book-list flex ali-c mt30 ml10">
                                <li v-for="(item,index) in xgtsList" :key="index">
                                    <div class="list-img">
                                        <img :src="item.books_info.components['封面']?item.books_info.components['封面']:initImg" class="img100">
                                        <div class="li-hover">
                                            <router-link class="li-look" :to="{path:'/pubDetails',query: {productId:item.product_id}}">查看详情</router-link>
                                        </div>
                                    </div>
                                    <div class="mt10 oneline" :title="item.books_info.components.name">{{item.books_info.components.name}}</div>
                                    <div class="fs12 c999 mt5">{{item.books_info.components['作者']}}</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <xszk-pop-pay
                    :isPayShow="isPayShow"
                    :payPrice="Number(getDescCont.price)"
                    :sourceName="getDescCont.name"
                    :sourceType="getDescCont.type_name"
                    @cancelPop="isPayShow=false"
                >
                </xszk-pop-pay>

            </div>
        </div>
    </div>
</template>

<script>
import vueQr from "vue-qr";
export default {
    name: "pubDetails",
    components:{
        vueQr,
        xszkHeader: (resolve) =>require([ "@/components/xszkHeader",], resolve),
        xszkPopPay: (resolve) =>require([ "@/components/xszkPopPay",], resolve)
    },
    computed: {
        oriClassList(){
            return this.$store.getters.oriClassList.slice(1);
        },
        token(){
            return this.$store.getters.token;
        },
        getId(){
            return this.$route.query.productId;
        },
    },
    data() {
        return {
            isLoginShow:false,
            initImg: require('@/static/images/desc_img.jpg'),
            qrImg: require('@/static/images/qr_img.jpg'),
            secondLvName:'',
            isOpen: false,
            isPayShow: false,
            getProductId:'',
            getCategorysId:'',
            getDescCont: null,
            keyWordList:[],
            getTypeList:[],
            getProcessList:[],
            getSceneList:[],
            glfgList:[], //关联法规
            glzyList:[],//关联资源
            xgtsList:[],//相关图书，相关音影
        };

    },
    methods: {
        htmlDecode(text) {
            let temp = document.createElement("div");
            temp.innerHTML = text;
            let output = temp.innerText || temp.textContent;
            temp = null;
            return output;
        },
        labelStr(){
            let modelObj = {};
            switch (this.getCategorysId) {
                case '8e150969e8ec4b65bb01ec3fc491e79a':
                    modelObj.time = this.getDescCont['发布时间']?'发布时间：'+this.getDescCont['发布时间']:'';
                    break
                case '8e15096a00734bd089c64a582135aef4':
                    modelObj.time = this.getDescCont['发布日期']?'发布时间：'+this.getDescCont['发布日期']:'';
                    break
                case '8e15096a2b5f48558cc6efed605674f8':
                    modelObj.time = this.getDescCont['发表时间']?'发布时间：'+this.getDescCont['发表时间']:'';
                    break
                case '8e150969fa0a47ed8d3ef0674d907abf':
                    modelObj.time = this.getDescCont['判决时间']?'发布时间：'+this.getDescCont['判决时间']:'';
                    break
                case '8e15096a5dfb458cbe216383cc67ba3d':
                    modelObj.time = this.getDescCont['发表时间']?'发布时间：'+this.getDescCont['发表时间']:'';
                    break
                default:
                    break
            }
            return modelObj;
        },
        downFile(){
            if(this.getDescCont['资源地址']){
                window.location.href = this.getDescCont['资源地址'];
            }else{
                this.toast.info("未找到该下载资源");
            }
        },
        toSourceDesc(item,nameTxt){
            let currName = item.indexOf("集)") != -1?item:item.replace(/ *\([^)]*\) */g, "");
            this.getSourceDesc(currName,nameTxt);
        },
        toGlDetails(item,type){
            let currName = item.indexOf("集)") != -1?item:item.replace(/ *\([^)]*\) */g, "");
            this.getGlDetails(currName,type);
        },
        toSearchPage(keyWord){
            // let currKeyWord  = keyWord.replace(/ *\([^)]*\) */g, "");
            let currKeyWord = keyWord.indexOf("集)") != -1?keyWord:keyWord.replace(/ *\([^)]*\) */g, "");
            if(keyWord){
                this.$router.push({
                    path:'/list',
                    query: {id:this.getCategorysId,seachKey:currKeyWord}
                })
            }
        },
        onAddCollect(){
            if(this.token){
                this.addCollect();
                return false;
            }
            this.isLoginShow = true;
        },
        onBuy(){
            if(this.token){
                this.isPayShow = true;
                return false;
            }
            this.isLoginShow = true;
        },
        addCollect(){
            let that = this;
            let data = `book_id=${this.getProductId}&type=${this.getDescCont.type}`;
            this.request.addCollect(data, (res)=> {
                if (res.code == "0") {
                    // that.toast.success('加入成功');
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        logicDesc(resData){
            this.getDescCont  = null;
            this.getCategorysId = "";
            this.keyWordList = [];
            this.getTypeList = [];
            this.getProcessList = [];
            this.getSceneList = [];
            this.glfgList = [];
            this.glzyList = [];
            document.title = resData.name+'-详情';
            let getName = resData.type_name;
            if(getName=='法律文件'){
                getName = '法律法规';
            }else if(getName=='法律观点'){
                getName = '法律文献';
            }else if(getName=='图书'){
                getName = '法律图书';
            }
            this.secondLvName = getName;
            if(this.oriClassList.length!=0){
                this.getCategorysId = this.oriClassList.filter(item=>item.name==getName)[0]._id;
            }
            this.getDescCont = resData.components;
            this.keyWordList = resData.components.keyword?resData.components.keyword.split(";"):[];
            this.getTypeList = resData.components['专业类别']?resData.components['专业类别'].split(";"):resData.components['法规类别']?resData.components['法规类别'].split(";"):[];
            this.getProcessList = resData.components['流程类别']?resData.components['流程类别'].split(";"):[];
            this.getSceneList = resData.components['适用场景']?resData.components['适用场景'].split(";"):[];
            if(this.getCategorysId!='8e15096a37db4cc299ebe46d58098931'&&this.getCategorysId!='8e15096a67a44807a4e45993a6df542b'){
                this.glfgList = resData.components['关联法规']?resData.components['关联法规'].split(";"):[];
                this.glzyList = resData.components['关联资源']?resData.components['关联资源'].split(";"):[];
            }else{
                if(resData.components['关联资源']){
                    this.getXgtsList(resData.components['关联资源'])
                }else{
                    this.xgtsList = [];
                }
            }
            //判断是否收藏
            if(this.token){
                this.addCollect();
            }
        },
        getXgtsList(name){
            let currName = name.replace(/ *\([^)]*\) */g, "");
            let that = this;
            let data = {
                name: currName,
                group_id:'',
            };
            this.request.getGlDetails(data, (res)=> {
                if (res.code == "0") {
                    let resData = res.data;
                    if(resData.length!=0){
                        that.xgtsList = resData.slice(0,6);
                    }else{
                        that.xgtsList = [];
                    }
                    
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        getSourceDesc(name,nameTxt){
            let that = this;
            let data = {
                name: name,
                group_id:'',
            };
            this.request.getGlDetails(data, (res)=> {
                if (res.code == "0") {
                    let resData = res.data;
                    if(resData.length!=0){
                        that.getProductId = resData[0].product_id;
                        that.$router.push({
                            path:'/pubDetails',
                            query: {productId:that.getProductId}
                        })
                    }else{
                        that.toast.info(`未找到该${nameTxt}`);
                    }
                    
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        getGlDetails(name,type){
            let that = this;
            let data = {
                name: name,
                group_id:'',
            };
            this.request.getGlDetails(data, (res)=> {
                if (res.code == "0") {
                    let resData = res.data;
                    if(resData.length!=0){
                        if(resData[0].product_id==that.$route.query.productId){
                            this.toast.info('关联资源和资源本身相同');
                            return false;
                        }
                        that.getProductId = resData[0].product_id;
                        that.$router.push({
                            path:'/pubDetails',
                            query: {productId:that.getProductId}
                        })
                    }else{
                        that.toast.info(type==0?'未找到该条关联法规':'未找到该条关联资源');
                    }
                    
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        getDetails(productId){
            let that = this;
            let data = {
                id: productId,
            };
            this.request.getDetails(data, (res)=> {
                if (res.code == "0") {
                    let resData = res.data;
                    if(resData){
                        that.getProductId = resData.product_id;
                        that.logicDesc(resData);
                    }else{
                        that.toast.info('产品信息不存在');
                        setTimeout(() => {
                            that.$router.back();
                        }, 500);
                    }
                   
                } else {
                    that.toast.error(res.message);
                }
            });
        },
    },
   
    created() {
    },
    watch:{
        $route: {
            handler(newVal, oldVal) {
                if(newVal.query.productId){
                    this.getDetails(newVal.query.productId);
                }
            },
            immediate:true,
            deep: true

        },
        getId:{
            handler(newVal,oldVal){
                if(newVal){
                    this.$router.go(0);
                }
            }
        },
    }
    

};
</script>

<style lang="stylus" scoped>
.custom-plain
    font-size 18px
    height 36px
    line-height 34px
.custom-full
    font-size 18px
    height 36px
    line-height 34px
    background #F56060
.custom-buy-full
    font-size 18px
    height 36px
    line-height 34px
    font-weight bolder
    color #F56060
    border 1px solid #F56060
    background rgba(245, 96, 96, 0.2)
.tool-code-img
    width 115px
    height 135px
    padding 10px 5px
    box-shadow 0 2px 4px 0 rgba(158, 166, 175, 0.5)
    border-radius 4px
    background #fff
    font-size 14px
    text-align center
p
    line-height 29px
.details-cont
    margin-top 17px
    width 100%
    overflow hidden
    .spot-type
        flex-shrink 0
        width 6px
        height 6px
        margin-top 7px 
        background #3266CC
        border-radius 50%
    .type-list
        display flex
        align-items center
        flex-wrap wrap
        margin-left 15px
    .type-list li>button
        font-size 14px
        color #3266CC
        cursor pointer
    .type-list li:after
        cursor default
        content ">"
        font-size 14px
        margin 0 7px
        color #000
    .type-list li:last-child:after
        content ""
    .desc-code
        margin-top 5px
        width 26px
        height 26px
        border-radius 4px
        border 1px solid #E8C47B
        padding 4px
        cursor pointer
    .desc-blue
        margin-left 16px
        margin-top 5px
        width 24px
        height 24px
        border-radius 4px
        border 1px solid rgba(50, 102, 204, 0.4)
        padding 5px
        cursor pointer
    .desc-txt
        position relative
        font-size 16px
        margin-top 15px 
        .open-up
            width 216px
            height 25px
            background #fff
            cursor pointer
            position absolute
            bottom 3px
            right 0
            text-align right 
            .open-up-txt
                color #3266CC
                font-size 16px
    .tag-btn
        padding 0 18px
        border 1px solid #3266CC
        font-weight bolder
        font-size 16px
        line-height 25px
        color #3266CC
        margin-top 10px
        margin-right 20px
        border-radius 14px
        background #F5F7FC
        &:hover
            color #3266CC
            background rgba(50, 102, 204, 0.3)
    .cont-fl
        width 888px
        height auto
        float left
        .fl-label
            width 100%
            padding 24px
            min-height 85px
            background #FFFFFF
            border-radius 4px
            margin-bottom 16px
            overflow hidden
            .desc-top
                width 700px
                overflow hidden
                line-height 30px
                font-weight bolder
                .desc-tag
                    position relative
                    top -1px 
                    font-size 16px
                    padding 5px 15px
                    border-radius 4px
                    background #F5E4B2 
                .desc-tit
                    font-size 18px
                    color #112C71
        .fl-desc-label
            position relative
            width 100%
            font-size 16px
            padding 40px 24px
            height auto
            background #FFFFFF
            border-radius 4px
            overflow hidden    
            .limit-read
                position absolute
                left 0
                bottom 40px
                z-index 9
                text-align center
                width 100%
                height 150px
                background linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, #FFFFFF 100%)
        
    .cont-fr
        width 296px
        height auto
        float right
        .fr-label
            width 100%
            min-height 100px
            background #FFFFFF
            box-shadow 0px 2px 4px 0px rgba(158, 166, 175, 0.5)
            border-radius 4px
            margin-bottom 15px
            .fr-title
                width 100%
                height 48px
                line-height 48px
                padding 0 15px
                font-size 16px
                border-bottom 1px solid #9EA6AF
            .fr-cont 
                padding 15px 15px 5px 15px
                font-size 14px
                .fr-item
                    display flex
                    margin-bottom 12px
                    cursor pointer
                    &:hover .title
                        color #3266CC
                    .title
                        line-height 20px
                    .item-spot
                        flex-shrink 0
                        margin-top 5px
                        margin-right 7px
                        width 8px
                        height 8px
                        border-radius 50%
                        border 2px solid #E8C47B
                    
    .book-label
        width 100%
        padding 24px 48px
        min-height 85px
        background #FFFFFF
        border-radius 4px
        margin-bottom 16px
        overflow hidden           
        .book-img
            width 185px
            height 262px
            background #f2f2f2
            overflow hidden
        .book-cont
            width 860px
            height auto
        .book-list li
            width 100px
            height auto
            margin 0 40px
            text-align center
            .list-img
                width 100%
                height 142px
                background #f2f2f2
                overflow hidden
                position relative
                cursor pointer
                .li-hover
                    position absolute
                    z-index 99
                    left 0
                    top 0
                    width 100%
                    height 100%
                    background linear-gradient(119deg, rgba(171, 171, 171, 0.7) 0%, rgba(171, 171, 171, 0.4) 100%)
                    box-shadow 0 1px 4px 0 rgba(229, 229, 229, 0.5)
                    backdrop-filter blur(3px)
                    display none
                    .li-look
                        display block
                        margin 59px auto
                        width 71px
                        height 24px
                        line-height 25px
                        background #4A72B3
                        font-size 12px
                        color #fff
                &:hover .li-hover
                    display block
          
        
</style>